<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>签字</title>
    <meta name="viewport" content="user-scalable=no">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1">
</head>
<style>
    *{
        padding: 0;
        margin:0;
    }
    .qianzi{
        /*background: #ccc*/
    }
    #canvas {
        border: 0px;
        margin:0 auto;
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    .anniu{
        display: flex;
        justify-content: space-between;
    }
    .anniu button{
        background:#0095ff;
        color:#fff;
        border:0px;
        padding:15px 10px;
        width: 48%
    }
    .title{
        text-align: center;
        padding:20px 0;
        font-size: 18px;
    }
    #img_arr{
        /*background:#ccc;*/
        background: transparent;
        height: 200px;
        border:1px solid #ccc;
    }
    #img_arr img{
        width: 30%;
        display: inline-block;
    }
    .lizi{
        padding:10px;
        box-sizing: border-box;
    }
    .lizi .tit{
        font-size: 14px;
    }
    .lizi .tit_cont{
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        padding:10px;
    }


</style>
<style type="text/css" media="all">
    .loadBox{
        position: absolute;
        left: 35%;
        top: 24%;
    }
    .loadBox .loaderContantBox {
        color: white;
        font-size: 50px;
        overflow: hidden;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        transform: translateZ(0);
        /* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
        animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;
    }
    .tt{
        width: 160px;
        text-align: center;
        display: block;
        position: absolute;
        left: 0;
        bottom: 6px;
        color: #fff;
        font-size: 18px;
    }
    .parentBox {
        height: 80px;
        background: rgba(0,0,0,0.5);
        padding: 80px;
        width: 80px;
        box-sizing: border-box;
        position: fixed;
        top: 35%;
        left: 30%;
        border-radius: 5px;
        display: none;

    }
    @keyframes loadBox {
        0% {
            box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
        }

        5%,
        95% {
            box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
        }

        10%,
        59% {
            box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
            -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
            -0.297em -0.775em 0 -0.477em;
        }

        20% {
            box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
            -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
            -0.749em -0.34em 0 -0.477em;
        }

        38% {
            box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
            -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
            -0.82em -0.09em 0 -0.477em;
        }

        100% {
            box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
        }
    }
    @keyframes round {
        0% {
            transform: rotate(0deg); /* 开始旋转 div 元素 */
        }

        100% {
            transform: rotate(360deg); /* 结束旋转 div 元素 */
        }
    }
</style>
<body style="overflow: hidden;">

<!--<div class="title">请确认签字</div>-->
<div class="lizi">
    <div class="tit">请按照如下文字进行签字</div>
    <div class="tit_cont">{$res.car_owner}</div>
</div>
<div class="qianzi">
    <canvas id="canvas"></canvas>
</div>

<div  class="anniu">
    <button onclick="cancel()">清空</button>
    <button onclick="save()" >下一个字</button>

</div>
<div style="padding:10px;">签名预览：</div>
<div id="img_arr" style="display:flex;flex-wrap:wrap"> </div>

<div  class="anniu" style=" position: fixed;width: 100%;bottom:0;left:0">
    <button onclick="chongzhi()" style="margin-right:20px">重置</button>
    <button onclick="tijiao()">提交</button>
</div>
<!--加载-->
<div class="parentBox">
    <div class="loadBox">
        <div class="loaderContantBox"></div>
    </div>
    <div class="tt">提交中</div>
</div>
</body>
<script src="/assets/js/jquery-3.2.1.min.js"></script>
<script src="/assets/js/html2canvas.js"></script>
<script src="/assets/js/layui/layui.all.js"></script>
<script>



    //签字板与顶部的距离
    var offsetTop = $(".qianzi").offset().top;
    var html=''
    let canvas = document.querySelector('canvas')
    let config = {
        width: window.innerWidth, // 宽度
        height: 200, // 高度
        lineWidth: 3, // 线宽
        strokeStyle: '#000', // 线条颜色
        lineCap: 'round', // 设置线条两端圆角
        lineJoin: 'round', // 线条交汇处圆角
    }
    canvas.width = config.width
    canvas.height = config.height
    // 设置一个边框，方便我们查看及使用
    canvas.style.border = '1px solid #ccc'
    // 创建上下文
    let ctx = canvas.getContext('2d')

    // 设置填充背景色
    ctx.fillStyle = 'transparent'
    // ctx.fillStyle = '#ccc'
    // 绘制填充矩形
    ctx.fillRect(
        0, // x 轴起始绘制位置
        0, // y 轴起始绘制位置
        config.width, // 宽度
        config.height // 高度
    );
    // 保存上次绘制的 坐标及偏移量
    let client = {
        offsetX: 0, // 偏移量
        offsetY: 0,
        endX: 0, // 坐标
        endY: 0
    }
    // 判断是否为移动端
    let mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

    // 初始化
    let inits = event => {
        // 获取偏移量及坐标
        let {
            offsetX,
            offsetY,
            pageX,
            pageY
        } = mobileStatus ? event.changedTouches[0] : event

        // 修改上次的偏移量及坐标
        client.offsetX = offsetX
        client.offsetY = offsetY
        client.endX = pageX
        client.endY = pageY

        // 清除以上一次 beginPath 之后的所有路径，进行绘制
        ctx.beginPath()

        // 根据配置文件设置进行相应配置
        ctx.lineWidth = config.lineWidth
        ctx.strokeStyle = config.strokeStyle
        ctx.lineCap = config.lineCap
        ctx.lineJoin = config.lineJoin

        // 设置画线起始点位
        ctx.moveTo(client.endX, client.endY-offsetTop)

        // 监听 鼠标移动或手势移动
        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
    }
    // 创建鼠标/手势按下监听器
    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", inits)
    // 绘制
    let draw = event => {
        // 获取当前坐标点位
        let {
            pageX,
            pageY
        } = mobileStatus ? event.changedTouches[0] : event
        // 修改最后一次绘制的坐标点
        client.endX = pageX
        client.endY = pageY

        // 根据坐标点位移动添加线条
        ctx.lineTo(pageX, pageY-offsetTop)

        // 绘制
        ctx.stroke()
    }
    // 结束绘制
    let cloaseDraw = () => {
        // 结束绘制
        ctx.closePath()
        // 移除鼠标移动或手势移动监听器
        window.removeEventListener("mousemove", draw)
    }
    // 创建鼠标/手势 弹起/离开 监听器
    window.addEventListener(mobileStatus ? "touchend" : "mouseup", cloaseDraw)

    // 取消-清空画布
    let cancel = () => {
        ctx.fillStyle = '#ccc'
        // 清空当前画布上的所有绘制内容
        ctx.clearRect(0, 0, config.width, config.height)

    }

    // 保存-将画布内容保存为图片
    let save = () => {
        // 将canvas上的内容转成blob流
        canvas.toBlob(blob => {
            console.log(blob);
            //   判断是否签字板上有内容
            var blank = document.createElement('canvas');
            blank.width = canvas.width;
            blank.height = canvas.height;
            // console.log(canvas.toDataURL() == blank.toDataURL())
            if(canvas.toDataURL() == blank.toDataURL()){
                layer.msg('请签字');
                return false;
            }

            saveCanvas()
            cancel()
            // // 获取当前时间并转成字符串，用来当做文件名
            // let date = Date.now().toString()
            // // 创建一个 a 标签
            // let a = document.createElement('a')
            // // 设置 a 标签的下载文件名
            // a.download = `${date}.png`
            // // 设置 a 标签的跳转路径为 文件流地址
            // a.href = URL.createObjectURL(blob)
            // // 手动触发 a 标签的点击事件
            // a.click()
            // // 移除 a 标签
            // a.remove()
        })
    }

    function saveCanvas() {
        const image = canvas.toDataURL(); // 获取画布内容的Base64编码
        console.log(image)
        var html=''
        html+='<img src="'+image+'" alt="">'
        $("#img_arr").append(html)

        // const link = document.createElement('a');
        // link.href = image;
        // link.download = 'signature.png';
        // link.click();
    }
    function chongzhi(){
        $("#img_arr").html("")
        cancel()
    }
    // 提交
    function tijiao(){
        console.log($('#img_arr img').length)
        if($('#img_arr img').length==0){
            layer.msg('请签字');
            return false;
        }
        html2canvas($('#img_arr'),{
            onrendered: function(canvas) {
                // document.body.appendChild(canvas);
                var files= convertCanvasToImage(canvas);

                // $(".parentBox").show()
                // return false;
                console.log(files)
                $.ajax({
                    type:"post",
                    dataType:'json',
                    url:"/index/index/imgbas",
                    data:{file:files},
                    success:function(data){
                        if(data.status == 200){
                            $.ajax({
                                type:"post",
                                dataType:'json',
                                url:"/index/index/postsign",
                                data:{urls:data.data,id:{$orderid}},
                                success:function(data){
                                    if(data.status == 200){
                                        // layer.msg(data.msg, {icon: 1, time: 3000});
                                        $(".parentBox").show()
                                        console.log(45454)
                                        setTimeout(function() {
                                            console.log(222);
                                            $(".parentBox").hide()
                                            //   location.reload();
                                            // window.history.back();
                                            window.location.href="/index/index/zhifu?id={$data.id}&type={$data.type}&time={$data.time}&channel_id={$data.channel_id}"

                                        }, 2000);

                                        // location.reload();
                                        return false;
                                    }else{
                                        layer.msg(data.msg);
                                        return false;
                                    }
                                }
                            });
                        }else{
                            layer.msg(data.msg);
                            return false;
                        }
                    }
                });
            }
        })
    }
    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        // console.log(image.src)
        // document.body.appendChild(image);
        return image.src;
    }
</script>
</html>